// setting.js
import { settings } from '../checkpoints/checkpoint_one'
import { ContactService } from '../component/contactService'
import { CanvasButton } from '../component/custombutton';

import { playBackgroundMusic, pauseBackgroundMusic } from '../component/music';
export class Setting {
    constructor(canvas, width, height, continueCallback) {
        this.canvas = canvas;
        this.context = this.canvas.getContext('2d');
        this.width = width;
        this.height = height;
        this.continueCallback = continueCallback;

        this.percentage = 8 / 10;

        this.modelWidth = this.width * this.percentage;
        this.modelHeight = this.height / 2;
        this.modelX = this.width / 10;
        this.modelY = this.height / 4;

        this.size_1 = this.modelWidth * (1 - this.percentage) / 2;

        this.otherButton = null;

        this.button = [];

        this.isAnimating = true;
        
        this.iconSize = this.width * (1 - this.percentage) / 3;

        this.isPopupVisible = false;

    }

    drawPopup() {
            this.onLoadImage(()=>{ 
              this.drawModal();
              this.drawButton();
            });
            
    }

    drawModal() {
        if(this.isAnimating === true) {
        this.context.drawImage(this.background, this.modelX, this.modelY, this.modelWidth, this.modelHeight);
       
        this.context.font = `${this.size_1}px Arial`;
        this.context.fillStyle = 'black';
        this.context.textAlign = 'center';
        this.context.fillText('设置', this.width / 2, this.modelY + this.size_1);
        
        this.context.font = `${this.size_1 * 2 / 3}px Arial`;
        this.context.fillText('音效', this.width / 2, this.modelY + this.size_1 * 2 + this.iconSize * 2 / 3);
        this.context.fillText('音乐', this.width / 2, this.modelY + this.size_1 * 4 + this.iconSize * 2 / 3);
        this.context.drawImage(this.force_icon, this.width / 4, this.modelY + this.size_1 * 2, this.iconSize, this.iconSize);
        this.context.drawImage(this.music_icon, this.width / 4, this.modelY + this.size_1 * 4, this.iconSize, this.iconSize);

        requestAnimationFrame(this.drawModal.bind(this));
        }
    }

    onLoadImage(callback) {
      let loadedCount = 0;
      const totalImages = 7;

      this.background = wx.createImage();
      this.background.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/background/background_3.png';
      this.background.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.force_icon = wx.createImage();
      this.force_icon.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/force.png';
      this.force_icon.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

      this.music_icon = wx.createImage();
      this.music_icon.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/music.png';
      this.music_icon.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

        this.open_icon = wx.createImage();
        this.open_icon.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/open.png';
        this.open_icon.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

        this.off_icon = wx.createImage();
        this.off_icon.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/off.png';
        this.off_icon.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
      };

    this.rebackImage = wx.createImage();
    this.rebackImage.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/reback.png';
    this.rebackImage.onload = () => {
      loadedCount++;
      checkIfAllLoaded();
  };

  this.contactServiceImage = wx.createImage();
  this.contactServiceImage.src = 'https://gitee.com/z-l-ya/game-image/raw/master/images/icons/contactService.png';
  this.contactServiceImage.onload = () => {
    loadedCount++;
    checkIfAllLoaded();
};

      const checkIfAllLoaded = () => {
          if (loadedCount === totalImages && callback) {
              callback();
          }
      };
  }
    drawButton() {
        let _this = this;
        let openforce = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/open.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width * 2 / 3,
                top: this.modelY + this.size_1 * 2,
                width: this.iconSize * 2,
                height: this.iconSize
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    if(_this.isPopupVisible) return;
                    button.destroy();
                    settings.FORCE_OPEN = false;
                    new CanvasButton(closeforce);
                })
            },
        };
        let closeforce = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/off.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width * 2 / 3,
                top: this.modelY + this.size_1 * 2,
                width: this.iconSize * 2,
                height: this.iconSize
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    if(_this.isPopupVisible) return;
                    button.destroy();
                    settings.FORCE_OPEN = true;
                    new CanvasButton(openforce);
                })
            },
        };
        if(settings.FORCE_OPEN === false) {
          new CanvasButton(closeforce);
        } else {
          new CanvasButton(openforce);
        }
        let openmusic = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/open.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width * 2 / 3,
                top: this.modelY + this.size_1 * 4,
                width: this.iconSize * 2,
                height: this.iconSize
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    if(_this.isPopupVisible) return;
                    button.destroy();
                    settings.MUSIC_OPEN = false;
                    pauseBackgroundMusic();
                    new CanvasButton(closemusic);
                })
            },
        };
        let closemusic = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/off.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width * 2 / 3,
                top: this.modelY + this.size_1 * 4,
                width: this.iconSize * 2,
                height: this.iconSize
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    if(_this.isPopupVisible) return;
                    button.destroy();
                    settings.MUSIC_OPEN = true;
                    playBackgroundMusic();
                    new CanvasButton(openmusic);
                })
            },
        };
        if(settings.MUSIC_OPEN === false) {
          new CanvasButton(closemusic)
        } else {
          new CanvasButton(openmusic);
        }
        let reback = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/reback.png",
            style: {
                left: this.width / 4,
                top: this.height * this.percentage - this.size_1 * 3,
                width: this.width / 2,
                height: this.size_1 * 1.5,
                backgroundColor: 'transparent',
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) =>{
                    if(_this.isPopupVisible) return;
                    _this.isPopupVisible = true;
                    _this.isAnimating = false;
                    _this.buttonDestroy();
                    _this.continueCallback();
                })
            },
        };
        new CanvasButton(reback);
        let contactService = {
            type: "image",
            image: "https://gitee.com/z-l-ya/game-image/raw/master/images/icons/contactService.png",
            style: {
                backgroundColor: 'transparent',
                left: this.width / 4,
                top: this.height * this.percentage - this.size_1 * 5,
                width: this.width / 2,
                height: this.size_1 * 1.5,
            },
            success(button) {
              _this.button.push(button);
              button.drawButton(_this.context); // 绘制按钮
              button.onTap((res) => {
                  if(_this.isPopupVisible) return;
                  _this.isPopupVisible = true;
                  _this.isAnimating = false;
                  _this.buttonDestroy();
                  wx.openCustomerServiceConversation({
                    type: 1,
                    success(res) {
                        console.log('客服对话成功', res);
                    },
                    fail(res) {
                        console.log('客服对话失败', res);
                    },
                });

              })
          },
        };
        new CanvasButton(contactService);
        let userAgreement = {
            type: "text",
            text: "用户协议",
            style: {
                left: this.width / 4,
                top: this.height * this.percentage - this.size_1 * 7,
                width: this.width / 6,
                height: this.size_1,
                textAlign: 'center',
                fontSize: this.size_1 / 2,
                textColor: "black",
                textDecorationLine: 'underline', 
                fontStyle: 'italic', 
                backgroundColor: 'transparent' 
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    if(_this.isPopupVisible) return;
                    _this.isPopupVisible = true;
                    _this.isAnimating = false;
                    _this.buttonDestroy();
                    wx.showModal({
                        title: "努力开发中噢~",
                        content: "敬请期待~"
                    });
                })
            },
        };
        new CanvasButton(userAgreement);
        let privacyPolicy = {
            type: "text",
            text: "隐私政策",
            style: {
                left: this.width * 7 / 12,
                top: this.height * this.percentage - this.size_1 * 7,
                width: this.width / 6,
                height: this.size_1,
                textAlign: 'center',
                fontSize: this.size_1 / 2,
                textColor: "black",
                textDecorationLine: 'underline', 
                fontStyle: 'italic', 
                backgroundColor: 'transparent'
            },
            success(button) {
                _this.button.push(button);
                button.drawButton(_this.context); // 绘制按钮
                button.onTap((res) => {
                    if(_this.isPopupVisible) return;
                    _this.isPopupVisible = true;
                    _this.isAnimating = false;
                    _this.buttonDestroy();
                    wx.showModal({
                        title: "努力开发中噢~",
                        content: "敬请期待~"
                    });
                })
            },
        };
        new CanvasButton(privacyPolicy);

        // this.drawOtherButton(contactService);

    }

    drawOtherButton(button) {
        this.context.drawImage(this.contactServiceImage, button.style.left, button.style.top, button.style.width, button.style.height);
        this.otherButton = button;
        // wx.onTouchStart(this.handleTouchStart.bind(this));
        // wx.onTouchEnd(this.handleTouchEnd.bind(this));
    }

    // handleTouchStart(res) {
    //     if (res.touches.length > 0) {
    //         const touch = res.touches[0];
    //         const touchX = touch.clientX;
    //         const touchY = touch.clientY;
            
    //         const button = this.otherButton.style;
    //         if (touchX >= button.left && touchX <= button.left + button.width &&
    //             touchY >= button.top && touchY <= button.top + button.height) {
    //             this.isTouching = true; 
    //         }
    //     }
    // }

    // handleTouchEnd(res) {
    //     if (res.changedTouches.length > 0) {
    //         const touch = res.changedTouches[0];
    //         const touchX = touch.clientX;
    //         const touchY = touch.clientY;

    //         const button = this.otherButton.style;
    //         if (touchX >= button.left && touchX <= button.left + button.width &&
    //             touchY >= button.top && touchY <= button.top + button.height) {
    //             if (this.isTouching) {
    //                 wx.openCustomerServiceConversation({
    //                     type: 1,
    //                     success(res) {
    //                         console.log('客服对话成功', res);
    //                     },
    //                     fail(res) {
    //                         console.log('客服对话失败', res);
    //                     },
    //                 });
    //                 this.isTouching = false; 
    //             }
    //         } else {
    //             this.isTouching = false; 
    //         }
    //     }
    // }

    buttonDestroy() {
        this.button.forEach(bt => {
            bt.destroy();
        });
    }

}
